pub mod element_t {
    use yew::prelude::*;
    use web_sys::{Element, Node};
    use gloo_utils::document;
    use weblog::*;
    
    // Component show tricks
    pub struct ElementComp;

    impl Component for ElementComp {
        type Message = ();
        type Properties = ();

        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }

        fn view(&self, _ctx: &Context<Self>) -> Html {
            // <p>Hello world</p>
            // VNode create 
            // <p></p>
            let div: Element = document().create_element("p").unwrap();
            // <p>value</p>
            div.set_inner_html("Hello world");
            // div -> Node
            let node: Node = div.into();
            // node: Node -> Html
            Html::VRef(node)
        }
    }

    // dynamic show enable change the html elements 
    // use @ for html elements
    pub struct DynamicElementComp;

    impl Component for DynamicElementComp {
        type Message = ();
        type Properties = ();
        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }

        fn view(&self, _ctx: &Context<Self>) -> Html {
            let level = 2;
            let text = "Fuck World".to_owned();

            html!{
                <@{format!("h{}", level)} class="dynamic">{text}</@>
            }
        }
    }

    // switch the condition to render the component
    // html hidden props
    pub struct BooleanElementComp;

    impl Component for BooleanElementComp {
        type Message = ();
        type Properties = ();

        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }

        fn view(&self, _ctx: &Context<Self>) -> Html {
            html!{
                // set the bool condition
                <div hidden={1 + 1 == 2}>
                    {"no world"}
                </div>
            }
        }
    }

    // Option<Component>
    pub struct OptionalElementComp;
    impl Component for OptionalElementComp {
        type Message = ();
        type Properties = ();

        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }

        fn view(&self, _ctx: &Context<Self>) -> Html {
            let maybe_id = Some("foobar");
            let none_id: Option<&str> = None;
            html!{
                <div>
                    <div id={maybe_id}>{maybe_id.unwrap()}</div>
                    // <div id={none_id.unwrap_or("nothing")}>{none_id.unwrap()}</div>
                </div>
            }
        }
    }


    // Button Component listen event
    pub enum Msg {
        Click,
    }

    pub struct ComponentHandlerElementComp;
    impl Component for ComponentHandlerElementComp {
        type Message = Msg;
        type Properties = ();
        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }
        fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
            match msg {
                Msg::Click => {
                    console_log!("hello");
                }
            };
            true
        }
        fn view(&self, ctx: &Context<Self>) -> Html {
            // send message and use in the update
            let click_callback = ctx.link().callback(|_| Msg::Click);
            html! {
                <button onclick={click_callback}>{"Click me"}</button>
            }
        }
    }

    // not found website-test
    // pub struct AgentHandlerElementComp;
}